<template>
  <div id="a" class="common-layout">
    <!-- 头部 -->
    <el-header class="a" style="border-bottom: 1px solid #909399">
      <img src="../../../public/logo/logo.png" />
      <el-header
        style="text-align: right; font-size: 12px; border-bottom: 1px solid"
      >
        <div class="toolbar">
          <el-dropdown class="dropdown">
            <el-icon size="30px">
              <Setting />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="changeMessage = true"
                  >修改信息</el-dropdown-item
                >
                <el-dropdown-item @click="doLogin">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
    </el-header>
    <el-container>
      <!-- 侧边栏 -->
      <div class="aside" style="height: 100%">
        <el-aside id="nav" width="200px">
          <el-scrollbar>
            <el-menu
              default-active="/homePageIndex"
              router
              background-color="#F5F7F9"
              active-text-color="#FFBE00"
              text-color="black"
            >
              <el-menu-item index="/homePageIndex">
                <template #title>
                  <el-icon> <House /> </el-icon>首页
                </template>
              </el-menu-item>

              <el-sub-menu index="2">
                <template #title>
                  <el-icon>
                    <DocumentCopy />
                  </el-icon>
                  题库管理
                </template>
                <el-menu-item index="/questionBank/subject">题目管理</el-menu-item>
                <el-menu-item index="/questionBank/test_paper">试卷管理</el-menu-item>
                <el-menu-item index="/questionBank/industry">科目管理</el-menu-item>
<!--                <el-menu-item index="/404">资料管理</el-menu-item>
                <el-menu-item index="/404">操作记录</el-menu-item>-->
              </el-sub-menu>

              <el-sub-menu index="3">
                <template #title>
                  <el-icon>
                    <Tickets />
                  </el-icon>
                  课程管理
                </template>
                <el-menu-item index="/courseList">课程列表</el-menu-item>
                <el-menu-item index="/courseTagList">标签管理</el-menu-item>
                <el-menu-item index="/courseCatalog">视频管理</el-menu-item>
                <el-menu-item index="/courseNotes">笔记管理</el-menu-item>
              </el-sub-menu>

              <el-sub-menu index="4">
                <template #title>
                  <el-icon> <Search /> </el-icon>找答案管理
                </template>
                <el-menu-item index="/question">问题管理</el-menu-item>
                <el-menu-item index="/questionCategory">问题分类管理</el-menu-item>
                <el-menu-item index="/chart">问题趋势</el-menu-item>
              </el-sub-menu>

              <el-menu-item index="/permission">
                <template #title>
                  <el-icon> <SetUp /> </el-icon>权限管理
                </template>
              </el-menu-item>

              <el-menu-item index="/userManagement">
                <template #title>
                  <el-icon> <User /> </el-icon>用户管理
                </template>
              </el-menu-item>

              <el-menu-item index="/financial">
                <template #title>
                  <el-icon> <User /> </el-icon>订单管理
                </template>
              </el-menu-item>

              <el-sub-menu index="5">
                <template #title>
                  <el-icon> <ShoppingCartFull /> </el-icon>报表
                </template>
                <el-menu-item index="/orderRegistration">
                  <el-icon> <WalletFilled /> </el-icon><span>用户订单</span>
                </el-menu-item>
                <el-menu-item index="/userRegistration">
                  <el-icon> <UserFilled /> </el-icon><span>用户注册</span>
                </el-menu-item>
                <el-menu-item index="/statisDatas">
                  <el-icon> <setting /> </el-icon><span>统计</span>
                </el-menu-item>
              </el-sub-menu>
            </el-menu>
          </el-scrollbar>
        </el-aside>
      </div>
      <el-container>
        <!-- 主体 -->
        <el-main class="a">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
    <div>
      <el-dialog v-model="changeMessage" title="修改信息" width="400px">
        <ChangeAdmin :userData="userData"> </ChangeAdmin>
      </el-dialog>
    </div>
  </div>
</template>

<script >
import axios from "axios";
import store from "@/store";
import { ref } from "vue";
import ChangeAdmin from "@/components/LeEn_admin/statements/components/ChangeAdmin.vue";

export default {
  data() {
    return {
      changeMessage: ref(false),
      userData: store.state.user,

    };
  },
  components: {
    ChangeAdmin,
  },
  methods: {
    doLogin() {
      axios.post("/api/user/logout").then((res) => {
        localStorage.setItem("token", null);
        localStorage.clear();
        store.commit("clearuser");
        console.log(store.state.user);
        location.href = "/doLogin";
      });
    },
  },
};
</script>

<style>
.dropdown {
  margin-top: -45px;
}

.a {
  background-color: #f5f7f9;
  /* height: 1080px;  */
}

#id {
  height: 700px;
}

#nav {
  background-color: rgba(84, 92, 100, 0.5);
}
#aside {
  height: 1200px;
}
</style>